<template>
    <div class="Mv-Out">
     <h2>全部Mv</h2>
     <div class="Mv-table">
    <dl>
   <td>地区:</td>
   <dd :class="{active:Mvindex===1}" @click="getMvData(1,'全部')">全部</dd>
   <dd :class="{active:Mvindex===2}" @click="getMvData(2,'内地')">内地</dd>
   <dd :class="{active:Mvindex===3}" @click="getMvData(3,'韩国')">韩国</dd>
   <dd :class="{active:Mvindex===4}" @click="getMvData(4,'日本')">日本</dd>
   <dd :class="{active:Mvindex===5}" @click="getMvData(5,'欧美')">欧美</dd>
   <dd :class="{active:Mvindex===6}" @click="getMvData(6,'港台')">港台</dd>
   </dl>
    <dl>
   <td >类型:</td>
   <dd :class="{active:Mvindex2===7}" @click="getMvData(7,'全部')">全部</dd>
   <dd :class="{active:Mvindex2===8}" @click="getMvData(8,'官方版')">官方</dd>
   <dd :class="{active:Mvindex2===9}" @click="getMvData(9,'原声')">原声</dd>
   <dd :class="{active:Mvindex2===10}" @click="getMvData(10,'现场版')">现场版</dd>
   <dd :class="{active:Mvindex2===11}" @click="getMvData(11,'网易出品')">网易出品</dd>
   </dl>
    <dl>
   <td >排序:</td>
   <dd :class="{active:Mvindex3===12}" @click="getMvData(12,'上升最快')">上升最快</dd>
   <dd :class="{active:Mvindex3===13}" @click="getMvData(13,'最热')">最热</dd>
   <dd :class="{active:Mvindex3===14}" @click="getMvData(14,'最新')">最新</dd>
    </dl>
    </div>
    <div style="display:flex;flex-wrap:wrap;margin-top:20px;" >
       <div class="related" @click="passvideo(item)" v-for="(item,i) in allMv" :key="i" >
             <img :src="item.cover" alt="">
             <div class="related-item">
              <div >{{item.name}}</div>
              <div style="color:#aaa">{{item.artistName}}</div>
             </div>
         </div>
    </div>
  
   </div>

</template>

<script>
var count=0;
  export default {
    name:"Mv",
    data() {
      return {
        MvInfo:{
          area:"全部",
           type:"全部",
          order:"上升最快",
          offset:0,
          limit:32
        },
           Mvindex:1,
           Mvindex2:7,
           Mvindex3:12,
           allMv:[]
      }
    },
    methods: {
     async geAllMv(){
       console.log("进入了")
     const {data:res} =await this.$request("/mv/all",{
      area:this.MvInfo.area,
      type:this.MvInfo.type,
      order:this.MvInfo.order,
      offset:count*32,
      limit:32
     })
     console.log(res)
     if(res.code!==200) return 
     this.allMv=[...this.allMv,...res.data]    
   
     },
     passvideo(item){
       console.log("传送",item)
      this.$router.push(`/Mvdetails?id=${item.id}`)
     },
      getMvData(num,str){
          if(num<=6){
            console.log(str)
            this.MvInfo.area=str
            this.Mvindex=num
<<<<<<< HEAD
            this.allMv=[]
=======
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
            this.geAllMv()
          }
          else if(num>6&&num<=11){
             console.log(str)
             this.Mvindex2=num
             this.MvInfo.type=str
<<<<<<< HEAD
              this.allMv=[]
=======
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
             this.geAllMv()
          }else{
            console.log(str)
             this.Mvindex3=num
             this.MvInfo.order=str
<<<<<<< HEAD
              this.allMv=[]
=======
>>>>>>> c423adac84462580faa00a3ec3967b51bfb448b7
             this.geAllMv()
          }
      },
      scrollDs(fn,delay){
          let last=0;
         return function(){
            //  使用防抖 阻止滑档多次触发
             let noew= +new Date()
             if((noew-last)>delay){
                 last=noew
                fn(count++)
             }
         }
       },
    },
    mounted(){
 this.geAllMv()
 window.addEventListener('scroll', this.scrollDs(this.geAllMv,3000))
    }
  }
</script>

<style lang="less" scoped>

    .Mv-Out{
 width:1400px;
    h2{
      margin:20px 0; 
    }
  .Mv-table{
    width:100%;
    dl{
      width:100%;
      height:40px;
       display:flex;
      td{
          width:80px;
         height:25px;
         line-height:25px;
         text-align:center;
         color:black;
      }
      dd{
         width:80px;
         height:25px;
         font-size:14px;
         color:#aaa;
         line-height:25px;
         text-align:center;
      }
      .active{
        border:1px solid #ccc;
        border-radius:10px;
        background-color:#FDF5F5;
        color:#EC4747;
      }
    }
  }
     .related{
        width:20%;
        height:180px;
        //  display:flex;
        margin-left:40px;
        // align-items:center;
        img{
          width:90%;
          height:120px;
          border-radius:10px;
        }
        .related-item{
        width:100%;
        height:100%;
         div{
            padding:4px;
            font-size:12px;
            color:#000;
         }
        }
      }
  }
    
</style>